<template>
	<view class="addStaff">
		<navBar isBack backColor="#fff" title="新增员工" color="#fff" background="transparent"></navBar>
		<view class="aS_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
		</view>
		<view class="addForm" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="headImg">
				<view class="headImgLeft">
					头像
					<image :src="headImg" mode=""></image>
				</view>
				<span @tap="toUpload">{{headImg?'重新上传':'上传正脸照片'}}</span>
			</view>
			<view class="name">
				姓名
				<input type="text" v-model="name" placeholder-class="ipt" placeholder="请输入姓名"/>
			</view>
			<view class="mobile">
				手机号
				<input type="number" maxlength="11" v-model="mobile" placeholder-class="ipt" placeholder="请输入手机号"/>
			</view>
		</view>
		<!-- 确定按钮 -->
		<view class="btn">
			<button type="default" @click="toAdd">确定</button>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue'
	import service_constr from '@/service/constr.js'
	import URL from '@/config/url.js'
	export default{
		data(){
			return{
				name:'',
				mobile:null,
				headImg:'',
				headImgId:'',
				id:null,
				navHeight:100,
			}
		},
		onLoad(options) {
			this.navHeight = 192 - Number(this.$store.state.system.navBarHeight)*2
			this.id = options.id
			if(options.id){
				this.getStaffInfo()
			}
		},
		methods:{
			// 编辑时获取员工信息
			getStaffInfo(){
				service_constr.getStaffInfo({id:this.id}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.name = res.data.name;
						this.mobile = res.data.phone;
						this.headImg = res.data.avatar.path?res.data.avatar.path:'';
						this.headImgId = res.data.avatar.id?res.data.avatar.id:'';
					}
				})
			},
			
			// 上传头像
			toUpload(){
				uni.chooseImage({
					count:1,
				    success: (res) => {
				        const tempFilePaths = res.tempFilePaths;
				        uni.uploadFile({
				            url: URL.ENTER_UPLOAD_IMAGE,
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.showLoading({
									title:'上传中'
								})
				                console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data)
								if(data.code==1){
									this.headImg = data.data.url;
									this.headImgId = data.data.id
									uni.showToast({
										title:'上传成功',
										icon:'success'
									})
								}else{
									uni.showToast({
										title:data.msg,
										icon:'none'
									})
								}
								setTimeout(function(){
									uni.hideLoading()
								},500)
				            }
				        });
				    }
				});
			},
			// 确定按钮
			toAdd(){
				if(this.name==''||this.phone==''||this.headImgId==''){
					uni.showToast({
						title:'请把信息填写完整',
						icon:'none'
					})
					return 
				}
				let params={
					id:this.id,
					team_id:this.$store.state.index.sid,
					name:this.name,
					phone:this.mobile,
					avatar:this.headImgId
				}
				service_constr.addStaff(params).then(res=>{
					if(res.code==1){
						console.log(res)
						let text = this.id?'修改成功':'添加成功'
						console.log(text)
						uni.showToast({
							title:text,
							icon:'success'
						})
						this.headImg = '',
						this.headImgId = '',
						this.name = '',
						this.mobile = '',
						uni.navigateBack(-1)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" >
	page{width: 100%;height: 100%;}
	.addStaff{
		width: 100%;
		height: 100%;
		background-color: #fff;
		.aS_topImg{width: 100%;height: 192rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		
		// 员工信息
		.addForm{
			padding: 40rpx 0;
			// margin-top: 92rpx;
			.headImg{
				.headImgLeft{
					display: flex;
					align-items: center;
					image{width: 72rpx;height: 72rpx;border-radius: 8rpx;margin-left: 20rpx;}
				}
			}
			.headImg,.name,.mobile{
				font: 400 32rpx/32rpx PingFang SC;
				color: #333333;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 686rpx;
				height: 120rpx;
				background-color: #F9F6F3;
				border-radius: 12rpx;
				padding: 0 26rpx 0 40rpx;
				margin:0 auto 40rpx;
				span,.ipt,input{font: 400 28rpx/32rpx PingFang SC; color:#C6C6C6;text-align: right;}
			}
		}
		// 确定按钮
		.btn{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			button{
				margin: 20rpx auto;
				width: 606rpx;
				height: 80rpx;
				background-color: #E7AD14;
				border-radius: 46rpx;
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
			}
		}
	}
</style>
